<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Agora WebSDK Demos</title>
  <link rel="stylesheet" href="./assets/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/index.css">
</head>
<body>
  <div class="container-fluid banner">
    <p class="banner-text">Agora WebSDK Demos</p>
    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
    </a>
  </div>

  <div class="container">
    <h1> Basic </h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Basic Video Call</h5>
          <p class="card-text">A demo of basic video call. Look at the code here, you can know how to make a video call.</p>
          <a href="./basicVideoCall/index.html" class=" btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Basic Live</h5>
          <p class="card-text">A demo of basic live. Look at the code here, you can know how to live and set user as host or audience.</p>
          <a href="./basicLive/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Basic Mute/Unmute</h5>
          <p class="card-text">A demo of basic video call. The demo here handles the user joined and left event and implements the functions of audio and video mute / unmute.</p>
          <a href="./basicMute/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <h1> Advanced </h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Recording Device Control</h5>
          <p class="card-text">Detect devices before a video call and switch devices in real time during a call.</p>
          <a href="./recordingDeviceControl/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Adjust Video Profile</h5>
          <p class="card-text">Change the local video profile in real time during a call, such as resolution, bitrate, frame, etc.</p>
          <a href="./adjustVideoProfile/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Display Call Stats</h5>
          <p class="card-text">Display stream/transport/session stats in real time during a video call.</p>
          <a href="./displayCallStats/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Share The Screen</h5>
          <p class="card-text">Share your screen with others.</p>
          <a href="./shareTheScreen/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Video Beauty Effect</h5>
          <p class="card-text">Turn on the beauty effect of the local video stream.</p>
          <a href="./videoBeautyEffect/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Audio Mixing/Audio Effect</h5>
          <p class="card-text">Play backgroud music (audio mixing) and play audio effect during video call or live.</p>
          <a href="./audioMixingAndAudioEffect/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Push Streams to CDN</h5>
          <p class="card-text">CDN live streaming is  the process of publishing streams into the CDN (Content Delivery Network), where users view the live broadcast through a web browser.</p>
          <a href="./pushStreamToCDN/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title">Dual Stream</h5>
          <p class="card-text">Multi-user and dual stream support in audio and video calls</p>
          <a href="./dualStream/index.html" class="btn btn-primary demo-card-btn">Go Now</a>
        </div>
      </div>
    </div>
</div>

  <script src="./assets/jquery-3.4.1.min.js"></script>
  <script src="./assets/bootstrap.bundle.min.js"></script>
</body>
</html>